<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由开发-嵌套路由</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <router-link to="/user">用户管理</router-link>
        <router-view></router-view>
    </div>
    <!-- 用户组件 -->
    <template id="userindex">
        <div>
            <h1>用户管理</h1>
            <router-link to="/user/add" tag="button">添加用户</router-link>
            <!--用户列表组件  -->
            <router-view></router-view>
        </div>
    </template>
    <!-- 添加用户组件 -->
    <template id="useradd">
        <div>
            <h1>添加用户</h1>
            <div>
                <input type="text" name="username" placeholder="用户名">
                <input type="text" name="email" placeholder="邮箱">
                <input type="text" name="phone" placeholder="手机">
                <input type="text" name="address" placeholder="地址">
                <button>提交</button>
            </div>
        </div>
    </template>
    <!-- 用户列表组件 -->
    <template id="userlist">
        <div>
            <h1>用户列表</h1>
            <table>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>admin</td>
                    <td>3999999@qq.com</td>
                    <td>13888888888</td>
                    <td>北京</td>
                    <td>
                        <router-link to="/user/edit/1">修改</router-link>
                        <a href="">删除</a>
                    </td>
                </tr>
                </tr>
            </table>
        </div>
    </template>
    <!-- 修改用户组件 -->
    <template id="useredit">
        <div>
            <h1>修改用户</h1>
            <h2>接收到的id值为:{{$route.params.id}}</h2>
            <div>
                <input type="text" name="username" placeholder="用户名">
                <input type="text" name="email" placeholder="邮箱">
                <input type="text" name="phone" placeholder="手机">
                <input type="text" name="address" placeholder="地址">
                <button>提交</button>
            </div>
        </div>
    </template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    import {} from './js/vue-router.js'
    // 定义组件
    let userindex = {template: '#userindex'}
    let useradd = {template: '#useradd'}
    let userlist = {template: '#userlist'}
    let useredit = {template: '#useredit'}
    //创建路由规则
    let routes = [
        {
            path: '/user', component: userindex,
            children: [
                {
                    path: '/', redirect: 'list'
                },
                {
                    path: 'list', component: userlist
                },
                {
                    path: 'add', component: useradd
                },
                {
                    path: 'edit/:id', component: useredit
                }
            ]
        },
    ]
    let router = new VueRouter({
        routes
    })
    let app = new Vue({
        el: '#app',
        data: {
            msg:'vue路由开发-嵌套路由'
        },
        router, // 挂载路由
    
    })

</script>